<!DOCTYPE html>
<html>
<head>

    <title>统计图表</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="../admin/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../admin/js/content.min.js?v=1.0.0"></script>
    <script src="../admin/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="../admin/js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="../admin/js/plugins/jasny/jasny-bootstrap.min.js"></script>
    <script src="../admin/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="../admin/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
    <script src="../admin/js/plugins/nouslider/jquery.nouislider.min.js"></script>
    <script src="../admin/js/plugins/switchery/switchery.js"></script>
    <script src="../admin/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
    <script src="../admin/js/plugins/iCheck/icheck.min.js"></script>
    <script src="../admin/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="../admin/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="../admin/js/plugins/clockpicker/clockpicker.js"></script>
    <script src="../admin/js/plugins/cropper/cropper.min.js"></script>
    <link href="../admin/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../admin/css/bootstrap-table.min.css" rel="stylesheet">
    <!-- 引入的js文件 -->
    <script src="../admin/js/bootstrap-table.js"></script>
    <script src="../admin/js/bootstrap-table-zh-CN.min.js"></script>

    <link href="../admin/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="../admin/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="../admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../admin/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="../admin/css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="../admin/css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="../admin/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="../admin/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="../admin/css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">
    <link href="../admin/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="../admin/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="../admin/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <link href="../admin/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="../admin/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
    <link href="../admin/css/animate.min.css" rel="stylesheet">
    <link href="../admin/css/style.min862f.css?v=4.1.0" rel="stylesheet">

    <script src="../admin/js/plugins/echarts/echarts-all.js"></script>
</head>
<body class="gray-bg">
<!--  <div class="div1"></div>-->
<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group" style="margin-top:15px">
                    <label class="control-label col-sm-1" for="names">姓名</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="names">
                    </div>
                    <label class="control-label col-sm-1" for="sexs">性别</label>
                    <div class="col-sm-3">
                        <select class="form-control" id="sexs">
                              <option value="">请选择</option>       
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <label class="control-label col-sm-1" for="courses">科目</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="courses">
                    </div>
                    <label class="control-label col-sm-1" for="uploadFlag">是否导入</label>
                    <div class="col-sm-3">
                        <select class="form-control" id="uploadFlag">
                              <option value="">请选择</option>       
                            <option value="1">是</option>
                            <option value="0">否</option>
                        </select>
                    </div>
                    <label class="control-label col-sm-1" for="startScore">成绩从:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="startScore">
                    </div>
                    <label class="control-label col-sm-1" for="endScore">至:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="endScore">
                    </div>
                    <label class="control-label col-sm-1" for="startTotalScore">总分从:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="startTotalScore">
                    </div>
                    <label class="control-label col-sm-1" for="endTotalScore">至:</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="endTotalScore">
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_query"  class="btn btn-primary">查询</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="toolbar" class="btn-group">
        <button id="btn_add"  type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_edit"  type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete"   type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>
    <table id="mytab"></table>
</div>
<!--添加-->
<div class="modal fade" id="addBook" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" onclick="add()" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">添加学生</h4>
            </div>
            <div id="addBookModal" class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">姓名:*</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="name" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sex" class="col-sm-2 control-label">性别:*</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="sex">
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="course" class="col-sm-2 control-label">科目:*</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="course" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="score" class="col-sm-2 control-label">成绩:*</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="score" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="totalScore" class="col-sm-2 control-label">总分:*</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="totalScore" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="center-block">
                    <button id="cancelAdd" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="addBooksInfo" type="button" class="btn btn-success" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--编辑-->
<div class="modal fade" id="editBookInfo" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">修改图书内容</h4>
            </div>
            <div id="editBookModal" class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="id1" class="col-sm-2 control-label">ID:*</label>
                        <div class="col-sm-10">
                            <input class="form-control" readonly id="id1" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name1" class="col-sm-2 control-label">姓名:*</label>
                        <div class="col-sm-10">
                            <input class="form-control"  id="name1" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sex1" class="col-sm-2 control-label">性别:*</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="sex1" onblur="checkSex()" maxlength="1"  type="text">
                        </div>
                        <script type="text/javascript">
                            function checkSex(){
                               var sex= $("#sex1").val();
                                debugger;
                                if("男"!=sex && "女"!=sex){
                                    alert('请输入男或女');
                                    $("#sex1").val("");
                                    return false
                                }

                            }

                        </script>
                    </div>
                    <div class="form-group">
                        <label for="course1" class="col-sm-2 control-label">科目:*</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="course1" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="score1" class="col-sm-2 control-label">成绩:*</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="score1" type="text">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="totalScore" class="col-sm-2 control-label">总成绩:*</label>
                        <div class="col-sm-10">
                            <input class="form-control" id="totalScore1" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="center-block">
                    <button id="cancelEdit" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="saveEdit" type="button" class="btn btn-success" data-dismiss="modal">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--删除-->
<div class="modal fade" id="deleteBook" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">确认要删除吗？</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="delete" type="button" class="btn btn-danger" data-dismiss="modal">删除</button>
            </div>
        </div>
    </div>
</div>
</body>
<script  type="text/javascript" >

    $(function() {
        //添加选中行class
        $('#mytab tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            } else {
                $('#mytab tbody').find('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });
        // 取消添加
        $("#cancelAdd").on('click', function () {
            console.log('cancelAdd');
            $("#addBookModal").find('input').val('')
        })
        // 添加图书信息
        $("#addBooksInfo").on('click', function () {
            console.log('addBooksInfo');
            // if (data.length) {
            if ($("#addBookModal").find('input').val() !== '') {
                var name = $("#name").val()
                var sex=$('#sex option:selected') .val();
                var course = $("#course").val()
                var score = $("#score").val()
                var totalScore = $("#totalScore").val()
                var addBookInfos = [].concat(name, sex, course, score, totalScore);
                //校验字段
                for (var i = 0; i < addBookInfos.length; i++) {
                    if (addBookInfos[i] === '') {
                        alert(titles[i] + '内容不能为空');
                        return false;
                    }
                }
                debugger;
                $.ajax({
                    url: "/student/add.controller",
                    type: "post",
                    dataType:'json',
                    data: {
                      'name': name ,
                      'sex': sex ,
                      'course': course,
                      'score': score,
                      'totalScore': totalScore
                        //传输到后台的是 json对象 后台接收后需要转换成list  然后循环获取id删除
                    },
                    success: function (data) {
                        debugger;
                        if(data.message=='success'){
                            alert("新增成功")
                            $("#mytab").bootstrapTable('refresh');
                        }else {
                            alert("新增失败");
                            return false;
                        }
                    },
                    error:function(){
                        alert("新增失败");
                        return false;
                    }
                });

            }
        })
        $("#addBooksInfo").click();

        $("#btn_add").click(function () {
            console.log('add');
            $("#addBook").modal()
        });
        // 编辑图书
        $('#btn_edit').click(function () {
            console.log('edit');
            var  select=$('#mytab tbody').find('tr.selected');
         if (select.length==1) {
             debugger;
                $("#editBookInfo").modal()
                var rowData = select.find("td");
                var inputs = $("#editBookModal").find('input')
                for (var i = 0; i < inputs.length; i++) {
                    $(inputs[i]).val(rowData.eq(i).text())
                }
            } else {
                alert('请选择项目');
            }
        });
        // 保存编辑
        $("#saveEdit").click(function () {
            debugger;
            var id1 = $("#id1").val()
            var name = $("#name1").val()
            var sex = $("#sex1").val()
            var course = $("#course1").val()
            var score = $("#score1").val()
            var totalScore = $("#totalScore1").val()
            var newRowData = [].concat(id, name, sex, course, score,totalScore);

            for (var i = 0; i < newRowData.length; i++) {
                if (newRowData[i] == '') {
                    alert(titles[i] + '内容不能为空')
                    return false
                }
            }
            $.ajax({
                url: "/student/update.controller",
                type: "post",
                dataType:'text',
                data: {
                    'id':id1,
                    'name': name ,
                    'sex': sex ,
                    'course': course,
                    'score': score,
                    'totalScore': totalScore
                },
                success: function (status) {
                    debugger;
                  if(status=='success'){
                      alert("修改成功")
                      $("#mytab").bootstrapTable('refresh');
                  }else {
                      alert("修改失败");
                      return false;
                  }
                }
            });
        })
        // 取消保存
        $("#cancelEdit").click(function () {
            console.log('cancelAdd');
            $("#editBookModal").find('input').val('')
        })
        //删除

        // 删除项目
        var id;
            $('#btn_delete').click(function () {
            debugger
            id=  $('#mytab tbody').find('tr.selected').find("td").eq(0).text();
            if (id) {
                $("#deleteBook").modal()
            } else {
                alert('请选择要删除的一条数据');
                return false
            }
        });
        // 删除
        $('#delete').click(function () {
            debugger;
            if (id) {
                $.ajax({
                    url: "/student/delete.controller",
                    type: "post",
                    data: {
                        "id": id  //传输到后台的是 json对象 后台接收后需要转换成list  然后循环获取id删除
                    },
                    success: function (response) {
                        debugger

                        if(response=="success"){
                            alert('删除成功');
                            $("#mytab").bootstrapTable('refresh');
                        }else if (response=="n"){
                            alert('主键为空,请重新选择');
                            return false
                        }else {
                            alert('删除数据失败');
                            return false
                        }
                    },
                    error: function () {
                       alert("删除失败");
                       return false;
                    }
                });
            } else {
                alert("未选中删除的数据");
                return false;
            }
        });
    });
    $('#mytab').bootstrapTable({
        method : 'post',
        url : "/student/getListByCondition.controller",//请求路径
        striped : true, //是否显示行间隔色
        pageNumber : 1, //初始化加载第一页
        pagination : true,//是否分页
        sidePagination : 'client',//server:服务器端分页|client：前端分页
        pageSize : 15,//单页记录数
        editable:true,//开启编辑模式
        clickToSelect: true,
        striped: true,
        pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
        showRefresh : true,//刷新按钮
        onClickRow: function (row) {
        },
        queryParams : function(params) {//上传服务器的参数
            var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
                limit : params.limit, // 每页显示数量
                offset : params.offset, // SQL语句起始索引
                //page : (params.offset / params.limit) + 1, //当前页码

                Name : $('#search_name').val(),
                Tel : $('#search_tel').val()
            };
            return temp;
        },
        columns : [ {
            title : 'ID',
            field : 'id',
            sortable : true
        }, {
            title : '姓名',
            field : 'name',
            sortable : true
        }, {
            title : '性别',
            field : 'sex',
        }, {
            title : '科目',
            field : 'course',
        },{
            title : '成绩',
            field : 'score',
        },{
            title : '总分',
            field : 'totalScore',
        },{
            title : '是否导出',
            field : 'uploadFlag',
            formatter : formatSex,
        } ]
    });

    //value代表该列的值，row代表当前对象
    function formatSex(value, row, index) {
        return value == 1 ? "是" : "否";
    }
    //查询按钮事件
    $('#btn_query').click(function() {


        var names = $("#names").val();
        var sexs = $("#sexs").val();
        var uploadFlag = $("#uploadFlag").val();
        var course = $("#courses").val();
        var startScore = $("#startScore").val();
        var endScore = $("#endScore").val();
        var startTotalScore = $("#startTotalScore").val();
        var endTotalScore = $("#endTotalScore").val();
        debugger
        $.ajax({
            type: "post",
            url: "/student/getListByCondition.controller",
            data: {
                name : names,
                sex:sexs,
                 course:course,
                   uploadFlag:uploadFlag,
                 startScore :startScore,
                 endScore:endScore,
                 startTotalScore:startTotalScore,
                 endTotalScore:endTotalScore},
                 dataType:"json",
               success : function(json) {
                debugger;
                $("#mytab").bootstrapTable('load', json);
            }
        });
    })

</script>
</html>
